<template>
    <div class="crowd">
        <router-link to="/brand2/era">
            <div class="left">
                <img :src="imgL" alt="">
            </div>
            
        </router-link>
        
            <div class="right">
            <router-link  to="/brand/era">
                <div class="top">
                    <img :src="imgT" alt="">
                </div>
                </router-link >
                <router-link to="/brand7/era">
                <div class="bottom">
                    <img :src="imgB" alt="">
                </div>
                </router-link>
            </div>
        
    </div>
</template>

<script>
export default {
    props:["imgL","imgT","imgB"]
}
</script>

<style scoped>
    .crowd{
        display: flex;
        justify-content: space-evenly;
        margin: 0.1rem auto;
        position: relative;
        font-size: 0.12rem;
    }
    .left{
        width: 1.6rem;
        height: 1.6rem;
        background-color: azure;
        position: relative;
    }
    .right{
        width: 1.6rem;
        height: 1.6rem;
    }
    .top{
        height: 50%;
        position: relative;
    }
    .bottom{
        height: 50%;
        position: relative;
    }
    img{
        width: 100%;
        height: 100%;
    }
    p{
        position:absolute;
        top: 0;
        right: 5%;
        text-align: right;
        font-size: 0.14rem;
        font-weight: 400;
    }
    span{
        position: absolute;
        top: 45%;
        right: 5%;
        white-space: nowrap;
        font-size: 0.10rem;
    }
    .left>span{
        top: 23%;
    }
</style>